<template>
    <div class="audit">
        <el-col :span="24" class="toolbar" style="padding: 10px">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.applyNo" placeholder="申请编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.drugName" placeholder="药店名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        v-model="filters.applyTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="提交开始日期"
                        end-placeholder="提交结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <template>
            <el-table :data="dataList" ref="multipleTable" highlight-current-row style="width: 100%;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column align="center" prop="applyNo" min-width="10" label="申请编号"  sortable></el-table-column>
                <el-table-column align="center" prop="drugName" min-width="16" label="药店名称"></el-table-column>
                <el-table-column align="center" prop="administrativeAddress" min-width="16" label="省市区" sortable></el-table-column>
                <el-table-column align="center" prop="drugAddress" min-width="16" label="地址"></el-table-column>
                <el-table-column align="center" prop="legalPersonName" min-width="7" label="法人姓名"></el-table-column>
                <el-table-column align="center" prop="applyer" min-width="7" label="申请人姓名"></el-table-column>
                <el-table-column align="center" prop="applyerPhone" min-width="11" label="申请人电话"></el-table-column>
                <el-table-column align="center" prop="applyTime" min-width="14" label="提交时间"></el-table-column>
                <el-table-column label="操作" fixed='right' width="280" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.applyStatus=='1'" @click="_exam(scope.row)">审核</el-button>
                        <el-button @click="_toSee(scope.row)">查看</el-button>
                        <el-button @click="amend(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="float: right;padding:5px;margin-top:10px;"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="pageTotal"
                >
            </el-pagination>
            <!-- :hide-on-single-page="isHidePage" -->
        </template>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" top="10px" @close='closeDialog'>
            <div class="px-2">
                <div class="border p-2 d-flex a-center flex-wrap mb-2">
                    <p class="py-1 mr-4">审核员：<span class="ml">{{name}}</span></p>
                    <p class="py-1 mr-4">申请编号：<span class="ml">{{item.applyNo}}</span></p>
                    <p class="py-1 mr-4">申请时间：<span class="ml">{{item.applyTime}}</span></p>
                    <p class="py-1 mr-4">审核时间：<span class="ml">{{item.updateDate}}</span></p>
                </div>
                <div class="border px-2">
                    <h3>申请人信息</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <p class="py-1 mr-4">姓名：<span class="ml">{{item.applyerName}}</span></p>
                        <p class="py-1 mr-4">身份证号：<span class="ml">{{item.applyCid}}</span></p>
                        <p class="py-1 mr-4">手机号码：<span class="ml">{{item.applyerPhone}}</span></p>
                    </div>
                    <h3>店铺信息</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <p class="py-1 mr-4">药店名称：<span class="ml">{{item.drugName}}</span></p>
                        <p class="py-1 mr-4">所在地区：<span class="ml">{{item.administrativeAddress}}</span></p>
                        <p class="py-1 mr-4">详细地址：<span class="ml">{{item.drugAddress}}</span></p>
                    </div>
                    <h3>门脸图</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <div v-if="item.shopFront&&item.shopFront.length">
                            <img v-for="(img, i) in item.shopFront" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                        </div>
                    </div>
                    <h3>资质信息</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <div class="mr-5">
                            <p class="py-1">营业执照:</p>
                            <div v-if="item.business&&item.business.length">
                                <img v-for="(img, i) in item.business" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                        <div class="mr-5">
                            <p class="py-1">药品经营许可证:</p>
                            <div v-if="item.license&&item.license.length">
                                <img v-for="(img, i) in item.license" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                        <div class="mr-5">
                            <p class="py-1">药品经营规范证书(GSP):</p>
                            <div v-if="item.standard&&item.standard.length">
                                <img v-for="(img, i) in item.standard" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                        <div class="mr-5">
                            <p class="py-1">互联网药品信息服务资格证书:</p>
                            <div v-if="item.qualification&&item.qualification.length">
                                <img v-for="(img, i) in item.qualification" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                    </div>
                    <h3>法人信息</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <p class="py-1 mr-4">法人姓名：<span class="ml">{{item.legalPersonName}}</span></p>
                        <p class="py-1 mr-4">身份证号：<span class="ml">{{item.legalPersonCid}}</span></p>
                        <p class="py-1 mr-4">手机号码：<span class="ml">{{item.legalPersonPhone}}</span></p>
                    </div>
                    <div class="d-flex a-center flex-wrap py-1">
                        <div>
                            <p class="py-1">法人身份证正面:</p>
                            <div v-if="item.front&&item.front.length">
                                <img v-for="(img, i) in item.front" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                        <div>
                            <p class="py-1">法人身份证背面:</p>
                            <div v-if="item.reverse&&item.reverse.length">
                                <img v-for="(img, i) in item.reverse" :key="i" :src="img.url" class="mr-2 mb-1" width="120px" height="120px">
                            </div>
                        </div>
                    </div>
                    <h3>账户信息</h3>
                    <div class="d-flex a-center flex-wrap pb-1">
                        <p class="py-1 mr-4">商户号：<span class="ml">{{item.merchantNo}}</span></p>
                        <p class="py-1 mr-4">商户密钥：<span class="ml">{{item.merchantKey}}</span></p>
                        <p class="py-1 mr-4">支付主体：<span class="ml">{{item.merchantBody}}</span></p>
                    </div>
                    <div v-if="item.examRemark&&this.dialogTitle == '详情'">
                        <h3>审核意见</h3>
                        <div class="d-flex a-center flex-wrap pb-1">
                            <p class="py-1 ml-2">{{item.examRemark}}</p>
                        </div>
                    </div>
                    <div v-if="this.dialogTitle == '审核'">
                        <p class="py-1"><span class="font-weight">审核意见: </span><span style="color:red;margin-left:10px">入驻申请驳回时必填</span></p>
                        <el-input type="textarea" rows="5" v-model="item.examRemark"  @input="change"></el-input>
                    </div>
                </div>
            </div>
            <span v-if="this.dialogTitle == '审核'" slot="footer" class="dialog-footer">
                <el-button @click="auditResult(3)">驳回</el-button>
                <el-button type="primary" @click="auditResult(2)">通过</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="amendVisible" width="40%">
            <el-form label-width='150px' :model="formData" :inline="true" ref="amendForm" :rules="rules" style="background:#f9f9f9;border-radius:10px;padding:10px 0">
                <el-form-item label="药店名称：" prop="drugName" style="display:block">
                    <el-input  placeholder="请输入药店名称" v-model="formData.drugName" @input="change"></el-input>
                </el-form-item>
                <el-form-item label="所属区域：" prop="area" style="display:block">
                    <h-area :editCode='editCode' @childChange="getEditCodeName($event)"></h-area>
                </el-form-item>
                <el-form-item label="详细地址：" prop="drugAddress" style="display:block">
                    <el-input  placeholder="请输入详细地址" v-model="formData.drugAddress" @input="change"></el-input>
                </el-form-item>
                <el-form-item label="申请人姓名：" prop="applyer" style="display:block">
                    <el-input  placeholder="请输入申请人姓名" v-model="formData.applyer" @input="change"></el-input>
                </el-form-item>
                <el-form-item label="申请人电话：" prop="applyerPhone" style="display:block">
                    <el-input  placeholder="请输入申请人电话" v-model="formData.applyerPhone" @input="change"></el-input>
                </el-form-item>
                <el-form-item v-if="formData.businessStatus" label="药店状态：" prop="applyerPhone" style="display:block">
                    <el-select v-model="formData.businessStatus" placeholder="请选择">
                        <el-option  v-for="item in businessStatusOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="amendVisible = false">取 消</el-button>
                <el-button type="primary" @click="amendData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import sysarea from '@/components/sysarea.vue'
import { formatTimeToStr } from "@/util/date";
export default {
    components:{
      "h-area": sysarea
    },
    data(){
        const areaRule = (rule, value, callBack) =>{
            if(!this.formData.administrativeAddress){
                return callBack(new Error('请选择所属区域'))
            }else{
                callBack()
            }
        }
        return{
            name: sessionStorage.getItem('username'),
            filters: {
                applyNo: '',
                drugName: '',
                name: '',
                applyTime: '',

            },
            dataList: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            currentPage: 1,
            pageSize:10,
            pageTotal: 0,
            isHidePage: true,
            dialogTitle: '详情',
            dialogVisible: false,
            item: {},
            formData: {},
            amendVisible: false,
            editCode: [],
            rules: {
                drugName: [{ required: true, message: '请输入店铺名称', trigger: 'blur'}],
                area: [{ validator: areaRule, trigger: 'blur'}],
                applyer: [{ required: true, message: '请输入申请人姓名', trigger: 'blur'}],
                applyerPhone: [{ required: true, message: '请输入申请人电话', trigger: 'blur'}],
            },
            businessStatusOptions: [
                {name: '正常营业', value: '1'},{name: '不营业', value: '2'}
            ]
        }
    },
    watch: {
        $route: {
            handler() {
                this._getDataList();
                //深度监听，同时也可监听到param参数变化
            },
            deep: true,
        }
    },
     created(){
        this._getDataList();
    },
    methods:{
        closeDialog(){
            this._getDataList()
        },
        formArea(row){
            return row.drugProvince + row.drugCity + row.drugCounty
        },
        formState(){

        },
        search(){
            this._getDataList()
        },
        change(){
            this.$forceUpdate()
        },
        handleSizeChange(item){
            console.log(item)
            this.pageSize = item
        },
        handleCurrentChange(item){
            console.log("handleCurrentChange:"+item)
        },
        getEditCodeName(e){
            this.formData.administrativeAddress = e.label.join('');
            this.formData.administrativeCode = e.value.join(',');
        },
        _getDataList(){
            let para = {
                pageNum:this.currentPage,
                pageSize: this.pageSize,
                applyNo: this.filters.applyNo,
                keyword: this.filters.drugName,
                name: this.filters.name,
                applyStatus: this.$route.query.status,
                startTime:this.filters.applyTime?formatTimeToStr(this.filters.applyTime[0], "yyyy-MM-dd"):'',
                endTime:this.filters.applyTime?formatTimeToStr(this.filters.applyTime[1], "yyyy-MM-dd"):'',
            }
            this.post("/pharmacyplatform/getDrugPage",para,res => {
                this.pageTotal = res.data.total;
                this.dataList = res.data.list
            },false)
        },
        _exam(row){
            this.dialogTitle = '审核';
            this.item = row;
            this.item.examRemark = "";
            this.dialogVisible = true;
        },
        _toSee(row){
            this.dialogTitle = '详情';
            this.item = row;
            console.log(this.item.applyerId)
            this.manageImg();
            this.dialogVisible = true;
        },
        amend(row){
            console.log(row)
            this.editCode = row.administrativeCode.split(',').map((el) => Number(el))
            this.formData.id = row.id;
            this.formData.drugName = row.drugName;
            this.formData.administrativeAddress = row.administrativeAddress;
            this.formData.administrativeCode = row.administrativeCode;
            this.formData.drugAddress = row.drugAddress;
            this.formData.applyer = row.applyer;
            this.formData.applyerPhone = row.applyerPhone;
            if(row.businessStatus){
                this.formData.businessStatus = row.businessStatus;
            }
            this.amendVisible = true;
        },
        amendData(){
            this.$refs['amendForm'].validate((valid) => {
                if(valid){
                    this.post('/pharmacyplatform/updateDrugstore', this.formData, res =>{
                        this.$message.success('修改成功');
                        this._getDataList();
                        this.amendVisible = false;
                    },false)
                }else{
                    return false
                }
            })
        },
        manageImg(){
            for (const ele of this.item.imgLs){
                console.log(ele)
                if(!this.item.shopFront) this.item.shopFront = [];
                if(!this.item.business) this.item.business = [];
                if(!this.item.license) this.item.license = [];
                if(!this.item.standard) this.item.standard = [];
                if(!this.item.qualification) this.item.qualification = [];
                if(!this.item.front) this.item.front = [];
                if(!this.item.reverse) this.item.reverse = [];
                if(ele.type == 'shopFront'){
                    this.item.shopFront.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'business'){
                    this.item.business.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'license'){
                    this.item.license.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'standard'){
                    this.item.standard.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'qualification'){
                    this.item.qualification.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'front'){
                    this.item.front.push({name: ele.ingSort, url: ele.imgUrl})
                }else if(ele.type == 'reverse'){
                    this.item.reverse.push({name: ele.ingSort, url: ele.imgUrl})
                }
            }
            this.sortArr(this.item.shopFront, 'name');
            this.sortArr(this.item.business, 'name');
            this.sortArr(this.item.license, 'name');
            this.sortArr(this.item.standard, 'name');
            this.sortArr(this.item.qualification, 'name');
            this.sortArr(this.item.front, 'name');
            this.sortArr(this.item.reverse, 'name');
        },
        sortArr(arr, attr){
            arr.sort((a,b)=>{
                return [a.attr] - [b.attr]
            })
        },
        auditResult(applyStatus){
            if(applyStatus == 3 && !this.item.examRemark) return this.$message.error('驳回请输入审核意见!')
            let params = {
                applyStatus,
                id: this.item.id,
                examRemark: this.item.examRemark,
                applyerId:this.item.applyerId
            }
            this.post('/pharmacyplatform/examine', params, res =>{
                if(res.code == 200){
                    this.$message.success('操作成功');
                    this._getDataList();
                }else{
                    this.$message.error('操作失败');
                }
                this.dialogVisible = false;
            })
        }
    },
   
}
</script>

<style scoped>
    
</style>